<template>
  <div class="menu-tree">
    <label v-for="menu in dataList" :key="menu.id">
      <el-submenu :index="menu.id" v-if="menu.children.length > 0 && menu.show">
        <template slot="title">
          <i class="el-icon-location" v-if="menu.icon"></i>
          <span>{{menu.name}}</span>
        </template>
        <label>
          <MenuTree :dataList="menu.children"></MenuTree>
        </label>
      </el-submenu>
      <el-menu-item v-else :index="menu.id" @click="handleRoute(menu)">
        <span slot="title">{{menu.name}}</span>
      </el-menu-item>
    </label>
  </div>
</template>

<script>

export default {
  name: 'MenuTree',
  props: ['dataList'],

  methods: {
    handleRoute (menu) {
      // 通过菜单URL跳转至指定路由
      this.$router.push(menu.path)
    }
  }
}
</script>